import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity } from '@tarojs/components';
import Taro from '@tarojs/taro';
import ImageLoader from '../ImageLoader';

import './HotLocationsBanner.scss';

// 广告展示的存储键名
const AD_SHOWN_KEY = 'daily_ad_shown';

// 获取今天的日期字符串（用于判断是否是新的一天）
const getTodayDateString = () => {
  const today = new Date();
  return `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`;
};

export const AdModal: React.FC = () => {
  const [visible, setVisible] = useState(false);
  const [modalAnimation, setModalAnimation] = useState(false);

  // 监听弹窗显示状态，控制动画
  useEffect(() => {
    // 临时修改：直接显示广告，方便测试
    // 后续可以恢复为基于本地存储的逻辑
    setVisible(true);
  }, []);

  // 控制动画效果
  useEffect(() => {
    if (visible) {
      // 延迟设置动画类，确保DOM已更新
      const timer = setTimeout(() => setModalAnimation(true), 10);
      return () => clearTimeout(timer);
    } else {
      // 先移除动画类，等待动画完成后再更新visible状态
      setModalAnimation(false);
    }
  }, [visible]);

  const handleClose = () => {
    // 先移除动画类，等待退出动画完成
    setModalAnimation(false);
    setTimeout(() => {
      setVisible(false);
    }, 300);
  };

  const handleAdClick = () => {
    // 处理广告点击事件
    console.log('Ad clicked');
    // 添加点击反馈
    Taro.vibrateShort({
      type: 'light'
    });
    handleClose();
  };

  const handleOverlayClick = (e: React.MouseEvent) => {
    if (e.target === e.currentTarget) {
      handleClose();
    }
  };

  if (!visible && !modalAnimation) {
    return null;
  }

  return (
    <View 
      className={`ad-modal-overlay ${modalAnimation ? 'overlay-visible' : ''}`} 
      onClick={handleOverlayClick}
    >
      <View 
        className={`ad-modal-content ${modalAnimation ? 'modal-visible' : ''}`} 
        onClick={(e) => {
          e.stopPropagation?.(); // 阻止事件冒泡，避免点击内容区域关闭模态框
        }}
      >
        {/* 装饰性元素 */}
        <View className="decorative-elements">
          <View className="decorative-glow glow-top-left"></View>
          <View className="decorative-glow glow-bottom-right"></View>
          <View className="decorative-particle particle-1"></View>
          <View className="decorative-particle particle-2"></View>
          <View className="decorative-particle particle-3"></View>
          <View className="rotating-ring ring-small"></View>
          <View className="rotating-ring ring-medium"></View>
          <View className="flash-effect"></View>
        </View>
        {/* 内容区域占满整个Modal */}
        <View className="modal-fill-content" onClick={handleAdClick}>
          <ImageLoader 
            src="/public/banner/banner.jpg" 
            mode="aspectFill"
            className="modal-image"
          />
          
          {/* 渐变遮罩 */}
          <View className="modal-gradient-overlay"></View>
          
          {/* 装饰元素 */}
          <View className="modal-decoration-1"></View>
          <View className="modal-decoration-2"></View>
        </View>
        
        <TouchableOpacity 
          className="close-button"
          activeClassName="close-button-active"
          onClick={(e) => {
            // 阻止事件冒泡到父元素
            e.stopPropagation?.();
            handleClose();
          }}
        >
          <View className="close-icon-wrapper">
            <Text className="close-text">关闭</Text>
          </View>
        </TouchableOpacity>
      </View>
    </View>
  );
};

// 保留原导出名称，确保与首页正确集成
export default AdModal;
export { AdModal as HotLocationsBanner };